<template>
  <fks-dialog
    :title="LANG.PROCESS_PERFORMANCE"
    :visible="visible"
    @open="openHandler"
    @close="close"
  >
    <!-- <fks-flow-comments
      flowActive
      :flowInfo="flowInfo"
      :data="comments"
      :dataSerise="commentSeries"
    ></fks-flow-comments> -->
    <!-- <fks-divider content-position="center">流程图</fks-divider> -->
    <!-- <div class="title-left">
      <fks-icon icon-class="route-line" style="margin-right: 8px"></fks-icon>
      <span>流程图</span>
    </div> -->
    <div
      v-if="customXML"
      class="title-left"
    >
      <i
        class="fks-icon-route-line"
        style="margin-right: 8px"
      />
      {{ t('fks.flow.flowchart') }}
    </div>
    <div
      v-if="customXML"
      class="flow-warp"
    >
      <div
        ref="content"
        class="containers"
        style="overflow: auto;"
      >
        <div class="flex">
          <div
            class="exmple-item"
            style="margin-right: 16px;"
          >
            <div class="exmple-icon current" />
            <span>{{ t('fks.flow.processing') }}</span>
          </div>
          <div
            class="exmple-item"
            style="margin-right: 16px;"
          >
            <div class="exmple-icon done" />
            <span>{{ t('fks.flow.passed') }}</span>
          </div>
          <div
            class="exmple-item"
            style="margin-right: 16px;"
          >
            <div class="exmple-icon process" />
            <span>{{ t('fks.flow.unfinished') }}</span>
          </div>
        </div>
        <div
          ref="canvas"
          class="canvas flow-svg-container"
          style
        />
      </div>
    </div>
    <div class="title-left">
      <i
        class="fks-icon-user-follow-line"
        style="margin-right: 8px"
      />
      {{ t('fks.flow.flowapproval') }}
    </div>
    <!-- <fks-divider content-position="center">已完成流程详情</fks-divider> -->
    <!-- 流程信息-已完成 -->
    <fks-table
      :data="comments"
      max-height="300"
    >
      <fks-table-column
        type="index"
        align="center"
      />
      <fks-table-column
        prop="taskName"
        :label="LANG.TASK_NAME"
        align="center"
        min-width="120"
      />
      <fks-table-column
        prop="asigneeName"
        :label="LANG.ASSIGNEE"
        align="center"
        min-width="100"
      />
      <fks-table-column
        :label="LANG.ARRIVAL_TIME"
        min-width="180"
      >
        <template slot-scope="scope">
          {{ scope.$index == 0 ? '——' : scope.row.createDate }}
        </template>
      </fks-table-column>
      <!-- <fks-table-column
        prop="approveDate"
        label="完成时间"
        min-width="180"
      ></fks-table-column> -->
      <fks-table-column
        :label="LANG.PROCESSING_TIME"
        min-width="120"
      >
        <template slot-scope="scope">
          {{
            scope.$index == 0
              ? '——'
              : scope.row.approveDate
                ? handlingTime(scope.row)
                : LANG.NOT_YET_PROCESSED
          }}
        </template>
      </fks-table-column>
      <!-- <fks-table-column prop="comment" label="审批意见" align="center" width="120"></fks-table-column> -->
    </fks-table>
  </fks-dialog>
</template>

<script>
import {
  getProcessHistory,
  getHistoryNodes,
  getModelXML,
  getUserTaskDetail
} from '../api'
import BpmnViewer from 'bpmn-js'
import locale from 'fawkes-lib/lib/mixins/locale'

export default {
  name: 'ProcessPerformance',
  mixins: [locale],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    taskId: {
      type: String,
      default: ''
    },
    bizId: {
      type: String,
      default: ''
    },
    processInstanceId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      customXML: true,
      comments: [],
      commentSeries: {
        taskName: 'taskName',
        userName: 'asignee',
        realName: 'asigneeName',
        solveType: 'approveStateName',
        solveDate: 'approveDate',
        createDate: 'createDate',
        flag: 'approveState',
        comment: 'comment'
      },
      flowInfo: {
        xml: '',
        userTask: [],
        currentNode: [],
        exclusiveGateway: []
      },
      customFlowConfig: {
        customAssigneeGroup: {},
        customAssigneeList: [],
        validate: true,
        isCustom: false
      }
    }
  },
  // computed: {
  //   handlingTime() {

  //     return 1
  //   }
  // },
  watch: {
    flowInfo: {
      handler(val, oldVal) {
        //this.$nextTick()：将回调函数延迟到下次dom更新后再执行，在数据修改之后立即使用它，然后等待dom更新
        this.$nextTick(() => {
          this.setFlowInfo() //绘制流程图
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handlingTime(row) {
      let createDate = this.$dayjs(row.createDate)
      let approveDate = this.$dayjs(row.approveDate)
      let duringTime = approveDate.diff(createDate, 'second')
      let during = this.$dayjs.duration(duringTime, 'second')
      let years = during.get('years') > 0 ? during.get('years') + '年' : ''
      let months = during.get('months') > 0 ? during.get('months') + '月' : ''
      let days = during.get('days') > 0 ? during.get('days') + '天' : ''
      let hours = during.get('hours') > 0 ? during.get('hours') + '时' : ''
      let mins = during.get('minutes') > 0 ? during.get('minutes') + '分' : ''
      let ss = during.get('seconds') > 0 ? during.get('seconds') + '秒' : ''
      // return years + months + days + hours + mins + ss
      return years
        ? years + months + days
        : months
        ? months + days + hours
        : days
        ? days + hours + mins
        : hours + mins + ss
    },
    openHandler() {
      if (this.taskId) {
        getUserTaskDetail(this.taskId).then((res) => {
          if (res.status && res.data.taskName) {
            this.taskNodeName = '—' + res.data.taskName
          }
        })
      }
      getProcessHistory({ processInstanceId: this.processInstanceId }).then(
        (res) => {
          this.comments = res.data
          //为pdf导出筛选条件 当且仅当流程结束且处于查看状态
          let tempBiz = this.bizId
          let tempx = this.$parent.tableData
          let tempLength = tempx ? tempx.length : 0
          var tempState = ''
          for (let i = 0; i < tempLength; i++)
            if (tempBiz === tempx[i].formBizId) tempState = tempx[i].taskState
          if (this.type == 'view' && tempState == '1')
            this.ifShowPdfButton = true
          this.$nextTick(() => {
            this.commentFlag = true
          })
        }
      )
      getModelXML({ processInstanceId: this.processInstanceId }).then((res) => {
        this.flowInfo.xml = res.data.bpmnXml
        if (res.data.customProcessJson) {
          this.customXML = false
        } else {
          this.customXML = true
        }
        getHistoryNodes({ processInstanceId: this.processInstanceId }).then(
          (resp) => {
            this.flowInfo = Object.assign(this.flowInfo, resp.data)
          }
        )
      })
    },
    setFlowInfo() {
      const _this = this
      // 获取到属性ref为“content”的dom节点
      this.container = this.$refs.content
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 注意：第一次渲染的时候this.container与canvas为undefined
      if (this.container && canvas) {
        canvas.innerHTML = '' // 清空内容
        var viewer = new BpmnViewer({
          container: canvas
        })
        viewer.importXML(_this.flowInfo.xml, function (err) {
          if (!err) {
            viewer.get('canvas').zoom('fit-viewport')
            const canvas = viewer.get('canvas')
            _this.flowInfo.currentNode.forEach((item) => {
              canvas.addMarker(item, 'current-highlight')
            })
            _this.flowInfo.userTask.forEach((item) => {
              canvas.addMarker(item, 'highlight')
            })
            _this.flowInfo.exclusiveGateway.forEach((item) => {
              canvas.addMarker(item, 'highlight')
            })
          } else {
            console.log('something went wrong:', err)
          }
        })
      }
    },
    close() {
      this.customXML = false
      this.taskNodeList = []
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .no-flow-chart {
  *[aria-controls*="pane-flow"] {
    display: none;
  }
}

::v-deep .fks-dialog {
  margin-top: 8vh !important;
}

::v-deep .fks-dialog__body {
  max-height: calc(84vh - 57px) !important;
}

.title-left {
  position: relative;
  // padding: 0 10px;
  height: 16px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 16px;
  // &::after {
  //   content: "";
  //   width: 5px;
  //   height: 100%;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   background: rgb(6, 84, 230);
  // }
}
</style>
<style lang="scss">
.flow-comment-tab-warp {
  padding-bottom: 4px;
  border-bottom: 1px solid #d7dee0;
  font-weight: normal;
  font-size: 16px;
  text-align: left;
  color: #3a464a;

  .tab-button {
    margin: 0 20px 0 0;
    cursor: pointer;

    &.active {
      font-weight: bold;
      color: #54a0fd;
    }
  }
}

.icon-example {
  padding: 0 6px;
  font-size: 14px;

  .icon-item:not(:last-child) {
    margin-right: 50px;
  }
}

.task-step {
  font-size: 14px;
  color: #3a464a;
}

.task-detail-title {
  margin-top: 4px;
  text-align: left;
}

.exmple-item {
  .exmple-icon {
    float: left;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 2px solid #71c54b;
    border-radius: 4px;

    &.current {
      border: 2px solid #59a0fe;
    }

    &.done {
      border: 2px solid #71c54b;
    }

    &.process {
      border: 2px solid #535353;
    }
  }

  span {
    float: left;
  }
}

.flow-svg-container {
  width: 100%;
  height: 280px;
  padding-top: 20px;
}

.current-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  stroke: #59a0fe !important;
}

.highlight:not(.djs-connection):not(.current-highlight) .djs-visual > :nth-child(1) {
  stroke: #71c54b !important;
  fill: #f1f9ed !important;
}

.bjs-powered-by {
  display: none;
}
</style>
